﻿<style>
    .filter .el-input__inner {
        height: 32px;
        line-height: 32px;
        border: 0px;
    }
</style>
<template>
    <el-col :sm="24">
        <div class="tab-filter-type">
            <div class="input-group" style="width:520PX;margin-bottom:10PX;">
                <div class="input-group-btn">
                    <button type="button" style="min-width:120PX;height: 34px;" class="btn btn-info  dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">{{sear.colname}} <span class="caret"></span></button>
                    <ul class="dropdown-menu">
                        <li v-for="fi in pzoption.collist" @click="sel(fi)"><a href="#" v-text="fi.colname"></a></li>
                    </ul>
                </div>
                <el-select placeholder="请选择筛选类型" size="mini" v-model="cal" class="form-control filter" style="height: 34px;width:30%;padding:0px">
                    <el-option label="包含" value="0"></el-option>
                    <el-option label="小于" value="1"></el-option>
                    <el-option label="大于" value="2"></el-option>
                    <el-option label="不等于" value="3"></el-option>
                    <el-option label="等于" value="4"></el-option>
                    <el-option label="在列表中(逗号隔开)" value="5"></el-option>
                </el-select>
                <input type="text" class="form-control" style="height: 34px;width:65%;border-left-width: 0px;" v-model="seastr"  placeholder="输入关键字搜索数据">
                <span class="input-group-btn" v-show="seastr">
                    <button class="btn btn-warning" style="height: 34px;" @click="reset" type="button">重置</button>

                </span>
            </div>
        </div>
        <div style="width:100%;height:40px; padding-left:10px; line-height:40px; border: 1px solid #EBEEF5;border-bottom: 0px;">
            {{pzoption.title}},共计找到<span class="text-danger">{{datalength}}</span>条数据
            <a class="tabletool" @click.stop="dialogFiledVisible = true">字段筛选</a>
            <a class="tabletool" @click="exportxls()">导出</a>
        </div>
        <el-table :id="tabid" class="qjTable"  ref="qjTable" v-loading="loading" :height="height" :row-style="{height:'20px'}" :cell-style="{padding:'0px'}" style="font-size: 10px" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading" :data="qjtabledata" @selection-change="handleSelectionChange" stripe border fit use-virtual big-data-checkbox :row-class-name="tableRowClassName">

            <el-table-column type="selection" width="45" v-if="pzoption.issel" fixed="left">
            </el-table-column>

            <el-table-column v-for="col in pzoption.collist" :prop="col.colid"  :label="col.colname" :key="col.colid" v-if="col.isshow" :width="col.width" min-width="120" align="center" :colid="col.colid" :show-overflow-tooltip="col.istip" :sortable="!col.nosort">
                <template slot-scope="scope">
                    <span>{{scope.row[col.colid],col}}</span>
                </template>
            </el-table-column>


            <el-table-column type="index" width="60" fixed="left" v-if="pzoption.isxh"> </el-table-column>
            <el-table-column label="操作列" min-width="120" align="center" v-if="iscz&&pzoption.collist.length>6" fixed="left">
                <template slot-scope="scope">
                    <el-button v-for="czcol in pzoption.czltabledata" v-if="czcol.isshow" @click="mangcol(scope.row,czcol)" :type="czcol.bttype" size="mini">{{czcol.colname}}</el-button>
                </template>
            </el-table-column>
            <el-table-column label="操作列" min-width="120" align="center" v-if="iscz&&pzoption.collist.length<7">
                <template slot-scope="scope">
                    <el-button v-for="czcol in pzoption.czltabledata" v-if="czcol.isshow" @click="mangcol(scope.row,czcol)" :type="czcol.bttype" size="mini">{{czcol.colname}}</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-dialog title="字段筛选" :visible.sync="dialogFiledVisible" center>
            <el-checkbox v-for="filed in pzoption.collist" v-model="filed.isshow">{{filed.colname}}</el-checkbox>
        </el-dialog>

    </el-col>

</template>
<style>
    .qfiter .el-table td, .qfiter .el-table th {
        padding: 8px 0;
    }

    .el-table__fixed-right {
        height: 100% !important;
    }

    .el-dialog__footer {
        margin-top: 30PX;
    }

    .tableRowClassName {
    }

    .qjTable .el-table td, .qjTable .el-table th {
        HEIGHT: 44PX !IMPORTANT;
        FONT-SIZE: 13PX;
        padding: 6px 0;
    }

    .tabletool {
        float: right;
        margin-right: 10px;
        color: dodgerblue;
        font-size: 13PX;
    }
</style>
<script>
    module.exports = {
        name: "qjtable",
        props: ['pzoption'],
        components: {
            'base-loading': httpVueLoader('/ViewV5/Base/Vue/Loading.vue')
        },
        data() {
            return {

                tabid: Math.floor(Math.random() * (90000 - 10000 + 1) + 10000),
                sear: {},
                seastr: "",
                cal: "0",
                dialogFormVisible: false,
                dialogTableVisible: false,
                dialogFiledVisible: false,
                childpro: {
                    multipleSelection: "",
                    locadata: [],
                    height: 480,
                    loading: false,
                    isxh: true//序号列
                }
            };
        },
        computed: {
            // 计算属性的 getter
            iscz: function () {
                var chi = this;
                return _.findIndex(chi.pzoption.czltabledata, function (col) {
                    return col.isshow
                }) > -1
            },
            height: function () {
                var chi = this;
                return chi.pzoption.height || chi.childpro.height;
            },
            loading: function () {
                var chi = this;
                return chi.pzoption.loading || chi.childpro.loading;
            },
            isxh: function () {
                var chi = this;
                return chi.pzoption.isxh && chi.childpro.isxh;
            },
            datalength: function () {
                return this.qjtabledata.length;
            },
            qjtabledata: function () {
                var pro = this;
                const search = pro.seastr;
                if (search) {
                    var calval = pro.seastr;
                    var qfiled = pro.sear.colid;
                    return pro.pzoption.dataset.filter(data => {
                        switch (pro.cal) {
                            case "0":    //包含
                                {
                                    return (data[qfiled] + "").indexOf(pro.seastr) > -1;
                                }
                                break;
                            case "1":    //小于
                                {
                                    return data[qfiled]*1 < calval;

                                }
                                break;
                            case "2":    //大于
                                {
                                    return data[qfiled]*1 > calval;

                                }
                                break;
                            case "3":    //不等于
                                {
                                    return data[qfiled] != calval;
                                }
                                break;
                            case "4":    //等于
                                {
                                    return data[qfiled] == calval;

                                }
                                break;
                            case "5":    //在列表中
                                {
                                    var bl = false;
                                    for (var i = 0; i < calval.split(",").length; i++) {
                                        if (data[qfiled].indexOf(calval.split(",")[i]) > -1) {
                                            bl = true;
                                            break;
                                        }
                                    }
                                    return bl;
                                }
                                break;
                            default: {

                            }
                        }
                    })
                }
                return this.pzoption.dataset; // dataset 就是之前el-table 的 data数据
            }
        },
        methods: {
            sel: function (col) {
                var pro = this;
                pro.sear = col;

            },
            reset: function () {
                this.seastr = "";
            },
            handleSelectionChange(val) {
                this.$emit('selection-change', val)
            },
         
            tableRowClassName({ row, rowIndex }) {
                //把每一行的索引放进row
                row.index = rowIndex;
            },

        
            mangcol: function (rowdata, coldata) {
                try {
                    if (coldata.mangefun) {
                        return coldata.mangefun.call(this, rowdata);
                    }
                    if (coldata.jscode) {
                        let jscode = coldata.jscode;
                        let func = new Function('rowdata', jscode);
                        func(rowdata)
                    }
                } catch (e) {

                }
            },
            exportxls: function () {
                var title = [];
                _.forEach(this.pzoption.collist, function (obj) {
                    title.push({ "value": obj.colname, "type": "ROW_HEADER_HEADER", "datatype": "string", "colid": obj.colid })
                })

                this.JSONToExcelConvertor(this.qjtabledata, this.pzoption.title + ComFunJS.getnowdate('yyyy-mm-dd'), title);
            },
            JSONToExcelConvertor: function (JSONData, FileName, ShowLabel) {

                var arrData = typeof JSONData != 'object' ? JSON.parse(JSONData) : JSONData;

                var excel = '<table>';
                //设置表头
                var row = "<tr>";
                for (var i = 0, l = ShowLabel.length; i < l; i++) {
                    //解决身份证问题
                    row += '<td style="' + "mso-number-format:'\@';\"" + ">" + ShowLabel[i].value + '</td>';
                }

                //换行
                excel += row + "</tr>";

                //设置数据
                for (var i = 0; i < arrData.length; i++) {
                    var row = "<tr>";

                    for (var j = 0; j < ShowLabel.length; j++) {
                        //解决身份证问题
                        var value = arrData[i][ShowLabel[j].colid];
                        row += '<td style="' + "mso-number-format:'\@';\"" + ">\t" + value + "</td>";
                    }

                    excel += row + "</tr>";
                }

                excel += "</table>";

                var excelFile = "<html xmlns:o='urn:schemas-microsoft-com:office:office' xmlns:x='urn:schemas-microsoft-com:office:excel' xmlns='http://www.w3.org/TR/REC-html40'>";
                excelFile += '<meta http-equiv="content-type" content="application/vnd.ms-excel; charset=UTF-8">';
                excelFile += '<meta http-equiv="content-type" content="application/vnd.ms-excel';
                excelFile += '; charset=UTF-8">';
                excelFile += "<head>";
                excelFile += "<!--[if gte mso 9]>";
                excelFile += "<xml>";
                excelFile += "<x:ExcelWorkbook>";
                excelFile += "<x:ExcelWorksheets>";
                excelFile += "<x:ExcelWorksheet>";
                excelFile += "<x:Name>";
                excelFile += "{worksheet}";
                excelFile += "</x:Name>";
                excelFile += "<x:WorksheetOptions>";
                excelFile += "<x:DisplayGridlines/>";
                excelFile += "</x:WorksheetOptions>";
                excelFile += "</x:ExcelWorksheet>";
                excelFile += "</x:ExcelWorksheets>";
                excelFile += "</x:ExcelWorkbook>";
                excelFile += "</xml>";
                excelFile += "<![endif]-->";
                excelFile += "</head>";
                excelFile += "<body>";
                excelFile += excel;
                excelFile += "</body>";
                excelFile += "</html>";


                var uri = 'data:application/vnd.ms-excel;charset=utf-8,' + encodeURIComponent(excelFile);

                var link = document.createElement("a");
                link.href = uri;

                link.style = "visibility:hidden";
                link.download = FileName + ".xls";

                document.body.appendChild(link);
                link.click();
                document.body.removeChild(link);
            }
        },
        watch: {
            'pzoption.collist': { //深度监听，可监听到对象、数组的变化
                handler(newV, oldV) {
                    var chi = this;
                    if (newV) {

                        localStorage.setItem(chi.$root.PageCode + chi.$root.pagedata.ExtData + "fileddata", JSON.stringify(chi.pzoption.collist));
                        chi.sear = chi.pzoption.collist[0];

                    }
                },
                deep: true
            }
        },
        mounted: function () {
            var chi = this;
            chi.$nextTick(function () {
                if (localStorage.getItem(chi.$root.PageCode + chi.$root.pagedata.ExtData + "fileddata")) {
                    chi.pzoption.collist = JSON.parse(localStorage.getItem(chi.$root.PageCode + chi.$root.pagedata.ExtData + "fileddata"));
                }
                if (chi.pzoption.collist.length > 0) {
                    chi.sear = chi.pzoption.collist[0];
                }
            })

        }
    };
</script>